<template>
<div style="height: 100%">
  <div class="main-tab">
    <x-header id="header" slot="header" :left-options="{showBack: false}" >
      <x-icon type="ios-arrow-back" slot="left" style="fill:#fff;" @click="back"></x-icon>
      <span slot="default" class="header-tit">个人资料</span>
    </x-header>
    <div class="main-headerAndTab">
      <group gutter="0">
        <cell is-link>
          <img :src="avatarUrl" slot="icon" class="avatar">
          <div slot="default" style="display: inline-block; position: relative;">
            <input type="file" accept="image/*"
                   ref="fileToUpload" name="fileToUpload" id="fileToUpload" style="opacity: 0;position: absolute;top:0;left:0;width: 5.36rem;height: 5.36rem" @change="uploadFile"/>
            <span class="right">修改头像</span>
          </div>
        </cell>
        <x-input is-link is-type="china-name" text-align="right" v-model="nickname">
          <div slot="label"><span class="right">昵称</span></div>
        </x-input>
        <popup-picker :data="list1" v-model="value1" :columns="1" show-name>
          <div slot="title" >
            <span class="right">性别</span>
          </div>
        </popup-picker>
        <cell :link="{path:'/phoneNum'}">
          <div slot="title"><span class="right">手机号码</span></div>
          <div slot="default"><span class="right">{{phone}}</span></div>
        </cell>
      </group>
      <group>
        <cell-box>
          <x-button class="verification" plain type="primary" mini @click.native="editUserInfo">保存</x-button>
        </cell-box>
      </group>
      <group>
        <cell-box>
          <x-button class="verification" plain type="primary" mini>退出登录</x-button>
        </cell-box>
      </group>
    </div>
  </div>
</div>
</template>

<script>
  import {PopupPicker,Picker,cookie} from 'vux'
  import {getUserDetail,editUserInfo} from '@/api/user'
    export default {
        name: "edit",
      components:{
        PopupPicker,
        Picker
      },
      methods:{
        back(){
          this.$router.go(-1)
        },
        uploadFile () {
          let file = this.$refs.fileToUpload.files[0];
          let param = new FormData(); //创建form对象
          param.append('file',file,file.name);//通过append向form对象添加数据
          param.append('token','l_Qy04YaEejPEbHcRoptsW1m2c1kzT9G51cAET95:yUgEV7cURW87FBznMHypykwchgw=:eyJzY29wZSI6ImJhamlhb3dlYiIsImRlYWRsaW5lIjoxODU1OTIzNDk3fQ==')

          param.append('chunk','0');//添加form表单中其他数据
          console.log(param.get('file')); //FormData私有类对象，访问不到，可以通过get判断值是否传进去
          let config = {
            headers:{'Content-Type':'multipart/form-data'}
          };  //添加请求头
          this.axios.post('http://upload.qiniu.com/',param,config)
            .then(response=>{
              console.log(response.data);
              this.avatarUrl='http://img.bajiaostar.com/' + response.data.key
              console.log(this.avatarUrl)
            })
        },
        uploadProgress (evt) {
          console.log('上传中', evt);
        },
        remove(index){
          this.imgList.splice(index,1)
        },
        uploadComplete (evt) {
          console.log(evt); // 获取上传成功后返回的结果
        },
        uploadFailed (evt) {
          console.log('上传失败', evt);
        },
        uploadCanceled (evt) {
          alert('上传取消');
        },
        inputTheme (evt) {
        },
        getUserDetail(){
          this.id=JSON.parse(cookie.get('userInfo')).id;
          getUserDetail(parseInt(this.id)).then(res =>{
            this.avatarUrl=res.avatar;
            this.phone=res.mobile;
            this.nickname=res.nickname;
            if (res.sex === 1){
              this.value1=['1'];
            }
            if(res.sex === 2){
              this.value1=['2'];
            }
          })
        },
        editUserInfo(){
          this.avatar=this.avatarUrl;
          this.nickName=this.nickname;
          this.sex=parseInt(this.value1)
          this.cid=JSON.parse(cookie.get('userInfo')).id;
          editUserInfo({
            cid:this.id,
            nickname:this.nickName,
            avatar:this.avatar,
            sex:this.sex}).then(res =>{
            console.log(res)
            this.$vux.toast.show({
              text:'修改成功',
              type:'success'
            })
          }).catch(res =>{
            this.$vux.toast.show({
              text:res,
              type:'cancel'
            })
          })
        }
      },
      data(){
          return{
            list1:[{
              name:'男性',
              value:'1',
              parent:0,
            },
              {
                name:'女性',
                value:'2',
                parent:0,
              }
            ],
            value1:[],
            phone:'绑定',
            avatarUrl:'../../../static/icon/my-no.png',
            nickname:'',
            sex:'',
            id:'',
          }
      },
      created(){
          this.getUserDetail();
      }
    }
</script>

<style scoped>
  .header-tit{
    margin-top: 0.2rem;
  }
  #header{
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
  }
  .avatar{
    width: 5.71rem;
    height: 5.71rem;
    background: #FFFFFF;
    border: 1px solid #F4F4F4;
    border-radius: 50%;
  }
  .right{
    font-size: 14px;
    color: #9B9B9B;
    letter-spacing: 0;
    text-align: justify;
  }
  .verification {
    font-size: 14px;
    color: #4A90E2;
    border: none;
    padding: 0;
  }
</style>
